<template>
      <div class="tabbox">
          <div v-for="(item,index) in tabs" :key="index" class="tab" :class="{active:currentIndex == index}" @click="
        $emit('deliverIndex',index)">{{item.tabName}}</div>
      </div>
</template>

<script>
export default {
    // 通过props接受父组件传过来的值，只读的
    // 数组形式
     props:["tabs",'currentIndex']

    //  对象形式,可以对传来的值进行类型验证
    // props:{
    //     tabs:{type:Array},
    //     .....
    // }
}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
   .tabbox{
       width: 60px;
       text-align: center;
   }


   .tabbox .tab{
       margin: 15px 0;
       border-left:3px solid transparent;
   }
   .active{
       font-weight: bold;
       border-left: 3px solid red ;
   }


</style>